<template>
	<view class="content-box">
		<u-navbar id="navbar" :background="'rgba(41,41,41,0)'" :backIconColor="'rgba(255,255,255,1)'"
			:border-bottom="false" :immersive="true"></u-navbar>
		<view class="column">
			<view class="row-center m-t-20 m-b-40 goods_data_title">{{ goodsdata.name || '' }}</view>
			<view class="row-center m-t-40 m-b-40 goods_text_line"
				style="text-indent: 2rem;"
				v-if="goodsdata.desc">
				&nbsp;&nbsp;&nbsp;&nbsp; {{goodsdata.desc}}
			</view>
			<!-- 视频 -->
			<view class="row-center m-b-40">
				<video
					src="https://joy.ytzzmall.com/wechat/static/images/baie.mp4"
					style="height: 420rpx; width: 100%;" :object-fit="fill" :show-mute-btn="true" show-play-btn
					:controls="true"></video>
			</view>
			<!-- 批次号 -->
			<view class="m-t-40 m-t-20 m-b-40 goods_text_table">
				<u-parse :html="goodsdata.content" :lazy-load="true" :show-with-animation="true"></u-parse>
			</view>
			<!-- 实验检测数据 -->
			<view class="m-t-40 m-t-20 m-b-40 goods_text_table">
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-50 m-b-40 goods_data_title">实验检测数据</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="6">蓬松度</u-col>
					<u-col span="6">耗氧量</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="6"><view class="xxl">18.3cm</view></u-col>
					<u-col span="6"><view class="xxl">3.2mg/100g</view></u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="3">参考标准</u-col>
					<u-col span="3"><view class="xl"> ≥14cm</view></u-col>
					<u-col span="3">参考标准</u-col>
					<u-col span="3"><view class="xl"> ≤4.8mg</view></u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="6">绒子含量</u-col>
					<u-col span="6">残脂率</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="6"><view class="xxl">96.0%</view></u-col>
					<u-col span="6"><view class="xxl">0.7%</view></u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="3">参考标准</u-col>
					<u-col span="3"><view class="xl"> ≥90.0%</view></u-col>
					<u-col span="3">参考标准</u-col>
					<u-col span="3"><view class="xl"> ≤1.0%</view></u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="6">清洁度</u-col>
					<u-col span="6">异色绒含量</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="6"><view class="xxl">1000mm</view></u-col>
					<u-col span="6"><view class="xxl">0.0%</view></u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="3">参考标准</u-col>
					<u-col span="3"><view class="xl"> ≥500mm</view></u-col>
					<u-col span="3">参考标准</u-col>
					<u-col span="3"><view class="xl"> ≤1.0%</view></u-col>
				</u-row>
			</view>
			<!-- 视频 -->
			<view class="m-t-40 m-t-20 m-b-40 goods_text_table">
				<u-row gutter="1">
					<u-col span="4" class="video-wrapper" v-for="(item, index) in videoList" :key="index">
						  <image :src="item.coverImage" class="cover-image" @tap="goPage(item.videoUrl)"></image>  
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="4">
						<view class="row-center">蓬松度</view>
					</u-col>
					<u-col span="4">
						<view class="row-center">清洁度</view>
					</u-col>
					<u-col span="4">
						<view class="row-center">绒子含量</view>
					</u-col>
				</u-row>
			</view>

			<!-- 检测报告 -->
			<view class="m-t-40 m-t-20 m-b-40">
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-50 m-b-40 goods_data_title">检测报告</view>
					</u-col>
				</u-row>
				<u-row gutter="1" class="row-center">
					<u-col span="6">
						<view class="row-center" style="width: 310rpx; height: 384rpx; padding-right: 10rpx;">
						<image @tap="previewImage('https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/908_1.jpg')" style="width: 320rpx; height: 384rpx;" :mode="aspectFit" 
						:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/908_1.jpg'"></image>
						</view>
					</u-col>
					<u-col span="6">
						<view class="row-center" style="width: 310rpx; height: 384rpx; padding-left: 10rpx;">
						<image @tap="previewImage('https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/908_2.jpg')" style="width: 320rpx; height: 384rpx;" :mode="aspectFit"
						:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/908_2.jpg'"></image>
						</view>
					</u-col>
				</u-row>
			</view>
			
			<!-- 证书 -->
			<view class="m-t-40 m-t-20 m-b-40">
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-50 m-b-40 goods_data_title">证书</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center" style="width: 710rpx; height: 420rpx;">
						<image @tap="previewImage('https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_zhengshu.png')" style="width: 710rpx; height: 420rpx;" :mode="aspectFit" 
						:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_zhengshu.png'"></image>
						</view>
					</u-col>
				</u-row>
			</view>
			
			<!-- 证书 -->
			<view class="m-t-40 m-t-20 m-b-40 goods_text_line">
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-50 m-b-40 goods_data_title">认识羽绒</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="m-b-40">
							有这样一种材料，她轻柔、保暖。<br>
							有这样一种材料，她拥有不同于其他纤维的球状结构，看起来像一朵朵蒲公英。<br>
							有这样一种材料，她饱含空气、吸湿排湿、能够自己呼吸。<br>
							她，就是绿色天然的羽绒。<br>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-20" style="width: 710rpx; height: 482rpx;">
						<image @tap="previewImage('https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_renshiyurong.jpg')" style="width: 710rpx; height: 482rpx;" :mode="aspectFit" 
						:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_renshiyurong.jpg'"></image>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 产地 -->
			<view class="m-t-40 m-t-20 m-b-40 goods_text_line">
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-50 m-b-40 goods_data_title">产品产地</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-b-40 goods_data_title">中国-青岛</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-20" style="width: 710rpx; height: 340rpx;">
						<image @tap="previewImage('https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_chandi.jpg')" style="width: 710rpx; height: 340rpx;" :mode="aspectFit" 
						:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_chandi.jpg'"></image>
						</view>
					</u-col>
				</u-row>
			</view>
			
			
			<!-- 证书 -->
			<view class="m-t-40 m-t-20 m-b-40 goods_text_line">
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-50 m-b-40 goods_data_title">羽绒服保养</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="m-b-40">
							清洗：<br>
							（1）局部清洗：可滴上衣领净或洗涤灵，几分钟后用湿毛巾擦干。单次效果不明显的话，重复多次即可。<br>
							（2）整件清洗：将羽绒服用冷水浸泡20分钟后，尽量挤干水分。用中性洗衣液和20-30℃清水配成洗液，将羽绒服在洗液中浸泡5-10分钟。将衣服平铺在干净台板上，用软毛刷蘸洗液轻轻刷洗。刷洗干净后，将衣服放在洗涤液中拎涮几下，然后先在30℃温水中漂洗2次，然后再用清水漂洗3次。用干浴巾包好，轻轻吸出水分并晾干。<br><br>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="m-b-50 p-b-30">
							<br>注意事项：<br>
							（1）梅雨季节进行翻晒，防止霉变。可用棉球沾酒精擦拭霉点，再用湿毛巾擦洗干净，晾透后妥善收藏。洗后晾干时，轻轻拍打以使羽绒恢复蓬松度，也利于羽绒彻底干透，防止发霉。<br>
							（2）中性清洗剂可减少对蛋白质纤维的破坏，洗后保持衣面光泽与内部蓬松。<br>
							（3）羽绒服不能拧干，应平铺挤压出水分，悬挂晾干。禁止曝晒，也不要熨烫，以免烫伤衣物。<br>
							（4）长期不穿的羽绒服要清洗干净、晾透后才能收纳。为避免灰尘，可装入服装收纳袋中；最好是挂式的。<br>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="1">
					<u-col span="12">
						<view class="row-center m-t-50 p-t-50" style="width: 710rpx; height: 424rpx;">
						<image @tap="previewImage('https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_joyloop.jpg')" style="width: 710rpx; height: 424rpx;" :mode="aspectFit" 
						:src="'https://joyloop-1325095858.cos.ap-nanjing.myqcloud.com/wechat/static/images/v_joyloop.jpg'"></image>
						</view>
					</u-col>
				</u-row>
			</view>
			
		</view>


	</view>
</template>

<script>
	import {
		getGoodsQualificationDetail,
	} from '@/api/store';
	export default {
		data() {
			return {
				videoList: [  
					{ coverImage: 'https://joy.ytzzmall.com/wechat/static/images/video_pengsong.jpg', videoUrl: 'https://joy.ytzzmall.com/wechat/static/images/pengsongdu.mp4' },
					{ coverImage: 'https://joy.ytzzmall.com/wechat/static/images/video_qingjie.jpg', videoUrl: 'https://joy.ytzzmall.com/wechat/static/images/qingjiedu.mp4' },  
					{ coverImage: 'https://joy.ytzzmall.com/wechat/static/images/video_hanliang.jpg', videoUrl: 'https://joy.ytzzmall.com/wechat/static/images/rongzihanliang.mp4' },  
				  ],  
				  videoContexts: {},
				playingIndex: null, // 当前播放视频的索引  
				imgUrl:`${this.$imgUrl}/wechat`,
				goodsdata: {
					title: '狮头白鹅绒',
					desc: '狮头®（皖西）白鹅体型健壮，体态高昂，气质英武，颈长呈弓形，胸深广，背宽平。全身羽毛洁白，头顶长有橘黄色肉瘤。狮头白鹅绒含绒量高，绒朵大，蓬松度高。',
					video1: '',
				},
			}
		},
		
		onLoad() {
			const options = this.$Route.query;
			console.log("optionsoptions",options)
			console.log("options.scene",options.scene)
			this.id = options.id;
			this.getGoodsQualificationDetailFun();
		},
		
		methods: {
			async getGoodsQualificationDetailFun() {
				const {
					data,
					code
				} = await getGoodsQualificationDetail({
					id: this.id,
				});
				if (code == 1) {
					this.goodsdata = data
				} else {
					this.isNull = true
					this.isFirstLoading = false;
				}
			},
			previewImage(current) {
				uni.previewImage({
				    current,
				    urls: [current] // 需要预览的图片http链接列表
				});
			},
			goPage(videoUrl) {
				this.$Router.push({
					path: '/bundle/pages/goods_video/goods_video',
					query: {
						videoUrl: videoUrl,
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '@/styles/base.scss';
	.goods_data_title{
		font-size: 56rpx;
	}
	.goods_text_table{
		line-height: 70rpx;
		font-size: 36rpx;
	}
	.goods_text_line{
		line-height: 56rpx;
		font-size: 36rpx;
	}
	.content-box {
		background-color: #292929;
		color: $-color-white;
		padding: 180rpx 20rpx 60rpx 20rpx;
		.video-wrapper {
		  width: 30%;  
		  margin-bottom: 20px;  
		  position: relative;  
		}
		.cover-image {
		  width: 240rpx;  
		  height: 200px;  
		  object-fit: cover;  
		}  
		.video-content {  
		  width: 100%;  
		  height: 200px;  
		  position: absolute;  
		  top: 0;  
		  left: 0;  
		  z-index: 1; /* 确保视频在封面图之上 */  
		  display: none; /* 初始时隐藏，由v-show控制显示 */  
		}  
	}
</style>